<template>
	<div class="com-root">
		<!-- <div class="con-line">
			<div class="com-title">
				{{ $t("message.editRelationPage.pfdTypeTitle") }}
			</div>
			<div class="com-content">
				<el-select
					v-model="selectValue"
					:placeholder="
						$t('message.cadViewer.ballRelationTable.selectHold')
					"
					class="samll-ipt"
				>
					<el-option
						v-for="(item, index) in selectOptions"
						:key="item"
						:label="item"
						:value="item"
						:min-width="item.minWidth"
					>
					</el-option>
				</el-select>
			</div>
		</div> -->

		<div class="table-lay">
			<el-table :data="macNumberDataList" :border="true" :stripe="false" :height="tableHeight" ref="singleTable"
				highlight-current-row @current-change="handleCurrentChange" :header-cell-style="{
					color: 'rgba(0, 0, 0, 0.85)',
					fontSize: '14px',
					fontWeight: 'bold',
					padding: 0,
					height: '36px',
					background: '#edeeef',
				}" :cell-style="{
	color: 'rgba(96,98,102,1)',
	fontSize: '14px',
	padding: 0,
	height: '42px',
}" :row-style="{
	color: 'rgba(96,98,102,1)',
	fontSize: '13px',
	padding: '10px 20px',
	height: '32px',
}" v-loading="macNumberDataList.length == 0 && loadingFlg">
				<!-- <el-table-column
					:prop="tableHeadData[0].prop"
					:label="tableHeadData[0].colLabel"
					:width="tableHeadData[0].width"
					:align="tableHeadData[0].align"
					:header-align="tableHeadData[0].headerAlign"
				>
				</el-table-column> -->
				<el-table-column :label="tableHeadData[0].colLabel" :width="60" :align="tableHeadData[0].align"
					:header-align="tableHeadData[0].headerAlign">
					<template slot-scope="scope">
						<p style="text-align:center;">
							{{ scope.row.prlNo }}
						</p>
					</template>
				</el-table-column>
				<!-- <el-table-column :prop="tableHeadData[1].prop" :label="tableHeadData[1].colLabel"
					:align="tableHeadData[1].align" :header-align="tableHeadData[1].headerAlign">
					<template slot-scope="scope">

						<div v-if="$route.query.AreaCode"></div>
						<el-input v-if="!$route.query.AreaCode && !disabled" class="_input" @input="changeIpt" clearable :disabled="disabled" v-model="scope.row.name"
							size="mini" />

						<p v-if="!$route.query.AreaCode && disabled">{{ scope.row.name }}</p>
					</template>
				</el-table-column> -->

				<el-table-column :prop="tableHeadData[2].prop" :label="tableHeadData[2].colLabel"
					:width="tableHeadData[2].width" :align="tableHeadData[2].align"
					:header-align="tableHeadData[2].headerAlign">
					<template slot-scope="scope">
						<img style="width: 40px; height: 40px; padding: 10px"
							:src="scope.row.flag == 1 ? checkImg : uncheckImg" alt="" />
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="bottom-lay">
			<!-- <div class="opt-lay">
				<el-input
					class="line-input"
					size="mini"
					v-model="inputAddLineNum"
				/>
				<div class="line-text">行</div>
				<el-button
					class="line-btn"
					size="mini"
					@click="onAdditionClick"
				>
					{{ $t("message.editRelationPage.addition") }}
				</el-button>
			</div> -->

			<!-- <div class="bottom-info-line">
				{{
					$t("message.smartPidPage.threeDLeftContent.footTotal") +
					count +
					$t("message.smartPidPage.threeDLeftContent.footerUnit")
				}}
			</div> -->
		</div>
	</div>
</template>

<script>
import { GetPFDDesc, getAreaDesc } from "@/api/api";
import eventBus from "@/eventBus/bus";


// 导出模块
export default {
	// 模块名字
	name: "rightRelativeView",
	props: ["isMarkupEnable"],
	data() {
		return {
			selectValue: 1,
			selectOptions: [1, 2, 3],
			loadingFlg: true,
			tableHeadData: [
				{
					index: 1,
					colLabel: this.$t(
						"message.cadViewer.ballRelationTable.tableHeads[0]"
					),
					prop: "index",
					width: 70,
					align: "center",
				},
				{
					index: 2,
					colLabel: this.$t(
						"message.cadViewer.ballRelationTable.tableHeads[1]"
					),
					prop: "name",
					align: "left",
				},
				{
					index: 3,
					colLabel: this.$t(
						"message.cadViewer.ballRelationTable.tableHeads[2]"
					),
					prop: "isFilled",
					width: 70,
					align: "center",
				},
			],
			count: 0,

			inputAddLineNum: 50,
			macNumberDataList: [
				// {
				// 	prlNo: 1,
				// 	proCode: "14",
				// 	name: "name",
				// 	flag: 1,
				// },
				// {
				// 	prlNo: 2,
				// 	proCode: "14",
				// 	name: "name",
				// 	flag: 0,
				// },
				// {
				// 	prlNo: 3,
				// 	proCode: "14",
				// 	name: "name",
				// 	flag: 1,
				// },
			],

			tableHeight: 400,
			checkImg: require("@/assets/img/checkbox_sel.png"),
			uncheckImg: require("@/assets/img/checkbox_unsel.png"),

			isJustSelectTableItemNotCallback: false,
			markInfo: {},
			selectTableItem: {},
			webClick: false,
			disabled: true,

			allChaneList: []
		};
	},
	watch: {
		isMarkupEnable(val) {
			console.log(val, "vvvvvvvvv")
			this.disabled = !val;
		},
		selectTableItem(val) {
			console.log(val, "vvvvvvvvv")
			if (!val || Object.keys(val) == 0) {
				//不可编辑
				this.$emit("closeIsMarkupEnable", false)
			} else {
				this.$emit("closeIsMarkupEnable", true)

			}
		},

	},

	methods: {
		changeIpt(e) {
			console.log(e)
			this.allChaneList.forEach(item => {
				if (item.prlNo == this.selectTableItem.prlNo) {
					item.name = e;
				}
			})
		},
		handleCurrentChange(e) {
			this.webClick = true;
			this.selectTableItem = e;
			this.$emit("onTableItemSelect", e);
			let add = true
			this.allChaneList.forEach(item => {
				if (item.prlNo == e.prlNo) {
					add = false
				}
			})
			if (add) {
				this.allChaneList.push(e);
			}
		},

		onAdditionClick() {
			let startIndex = this.macNumberDataList.length;
			for (let i = 0; i < this.inputAddLineNum; i++) {
				let temp = {};
				temp.id = startIndex + i;
				temp.name = `# ${temp.id}`;
				temp.isFilled = false;
				this.macNumberDataList.push(temp);
			}
		},

		async GetPFDDescApi() {
			this.loadingFlg = true;
			this.macNumberDataList = []
			let macNumberDataListTemp = [];
			let dataJson = {
				ProCode: Number(this.$route.query.proCode),
				AreaCode: Number(this.$route.query.AreaCode),
			};
			let Api = this.$route.query.AreaCode ? getAreaDesc : GetPFDDesc;
			let res = await Api(dataJson);
			try {
				if (this.$route.query.AreaCode) {
					res.data.data.forEach(item => {
						item.prlNo = item.areaNo;
					})
				}

			} catch (error) {

			}
			this.loadingFlg = false;

			macNumberDataListTemp = res.data.data;
			this.count = res.data.data.length;

			this.macNumberDataList = macNumberDataListTemp.splice(0, 1000)
			if (this.macNumberDataList.length > 0) {
				setTimeout(() => {
					this.startLinstionS(macNumberDataListTemp, 1);
				}, 300);
				this.$refs.singleTable.setCurrentRow(this.macNumberDataList[0]); // リストの一番上を選択済みにする
			}
		},

		startLinstionS(data, currentPage) {
			let dom = this.$refs.singleTable.bodyWrapper;
			dom.addEventListener("scroll", (e) => {
				if (dom.scrollHeight <= dom.scrollTop + dom.clientHeight + 50) {
					let tempArr = data.splice(0, 500)
					this.macNumberDataList.push.apply(this.macNumberDataList, tempArr);
				}
			})
		},


	},

	updated() {
		this.tableHeight = $(".table-lay").height() - 0.1;
	},

	mounted() {
		console.log(Number(this.$route.query.proCode))
		this.GetPFDDescApi();

		eventBus.$on("changeRivhtMenu", (e) => {
			this.markInfo = e;

			for (let i = 0; i < this.macNumberDataList.length; i++) {
				if ((this.macNumberDataList[i].prlNo == e.prlNo) || (this.macNumberDataList[i].prlNo == e.selectTableItemprlNo)) {
					if (!this.webClick) {
						let dom = this.$refs.singleTable.bodyWrapper.scrollTop = i * 42;
					}
					this.webClick = false;

					this.$refs.singleTable.setCurrentRow(this.macNumberDataList[i]);
				}
			}
		})

		eventBus.$on("clearList", (e) => {
			this.macNumberDataList.forEach((i, v) => {
				if (i.prlNo == e) {
					console.log(e)
					let temp = {
						flag: 0,
						name: "",
						prlNo: e,
						proCode: this.$route.query.proCode,
					}
					this.macNumberDataList.splice(e - 1, 1, temp)
					return
				}
			});
		})

		// eventBus.$on("reGetPfdList",()=>{

		// 	this.GetPFDDescApi();
		// })

		// this.startLinstionS();
	},
};
</script>

<style lang="scss" scoped>
.com-root {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.con-line {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #efefef;
	padding: 10px;
	border-bottom: 1px solid lightgrey;

	.com-title {
		width: 15%;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.85);
		line-height: 22px;
	}

	.com-content {
		width: 85%;
	}
}

.table-lay {
	height: 100%;
	flex-shrink: 1;
	flex-grow: 1;
	// background-color: aquamarine;
}

.bottom-lay {
	background-color: #efefef;

	.opt-lay {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 5px;
		background-color: white;
		border-bottom: 1px solid lightgrey;

		.line-input {
			width: 35%;
			background: #ffffe1;

			::v-deep .el-input__inner {
				background: #ffffe1;
			}
		}

		.line-text {
			margin-left: 10px;
			margin-right: 30px;
		}

		.line-btn {
			width: 100%;
			flex-grow: 1;
		}
	}

	.bottom-info-line {
		width: 100%;
		padding: 10px;
		text-align: center;
	}

	padding-bottom: 40px;
}

// .samll-ipt {
// 	width: 100%;
// 	::v-deep .el-input input {
// 		height: 24px;
// 	}
::v-deep .el-input__inner {
	width: 100%;
	height: 100%;
	background: none !important;
	border: 0 none;
	padding: 0;
	font-size: 15px;
}

// }
</style>